Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@os-design/error-boundary
Advanced tools
The Error Boundary component. Fully supports Relay (useQueryLoader/loadQuery, useLazyLoadQuery).
The Error Boundary component. Fully supports Relay (useQueryLoader/loadQuery, useLazyLoadQuery).
Error Boundary allows you to catch JS errors that occur in the UI. This package is a wrapper that allows you to wrap your components to catch UI errors that may occur inside them.
Install the package using the following command:
yarn add @os-design/error-boundary
Let's assume that we have a component that sometimes throw the error.
import React, { useState } from 'react';
const BadComponent: React.FC = () => {
const [hasError, setHasError] = useState(false);
if (hasError) {
throw new Error('Something happened');
}
return (
<>
<p>I am working!</p>
<button onClick={() => setHasError(true)}>Throw the error</button>
</>
);
};
export default BadComponent;
To catch errors that may occur inside the BadComponent
, wrap it with the ErrorBoundary
as follows:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = () => (
<ErrorBoundary fallback={<h1>An error occured</h1>}>
<BadComponent />
</ErrorBoundary>
);
export default App;
Most likely, you want to print an error message or render the fallback component, depending on the error type (for example, render some component, if there is no network connection).
In this case, you can pass a function to the fallback and get an error like this:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = () => (
<ErrorBoundary fallback={({ error }) => <h1>{error.message}</h1>}>
<BadComponent />
</ErrorBoundary>
);
export default App;
Let's assume that you have a component that throws the «No error connection» error. You successfully render another component with the error message, but what if the user has already restored the Internet connection?
In this case, you also need to render the retry button. When you click on it, the component will try to render again. You can do it in the following way:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = () => (
<ErrorBoundary
fallback={({ error, retry }) => (
<div>
<h1>{error.message}</h1>
<button onClick={retry}>Retry</button>
</div>
)}
>
<BadComponent />
</ErrorBoundary>
);
export default App;
useQueryLoader
/ loadQuery
As Relay documentation says:
When using
useQueryLoader
/loadQuery
to fetch a query, in order to retry after an error has occurred, you can callloadQuery
again and pass the new query reference tousePreloadedQuery
.
You can do it as follows:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = ({ initialQueryRef }) => {
const [queryRef, loadQuery] = useQueryLoader(query, initialQueryRef);
return (
<ErrorBoundary
fallback={({ error, retry }) => (
<div>
<h1>{error.message}</h1>
<button
onClick={() => {
loadQuery(/* ... */);
retry();
}}
>
Retry
</button>
</div>
)}
>
<MainContent queryRef={queryRef} />
</ErrorBoundary>
);
};
export default App;
useLazyLoadQuery
As Relay documentation says:
When using
useLazyLoadQuery
to fetch a query, in order to retry after an error has occurred, you can attempt to re-mount and re-evaluate the query component by passing it a newfetchKey
.
You can do it as follows:
import React from 'react';
import ErrorBoundary from '@os-design/error-boundary';
const App: React.FC = ({ initialQueryRef }) => {
const [queryRef, loadQuery] = useQueryLoader(query, initialQueryRef);
return (
<ErrorBoundary
fallback={({ error, retry }) => (
<div>
<h1>{error.message}</h1>
<button onClick={retry}>Retry</button>
</div>
)}
>
{(fetchKey) => <MainContent fetchKey={fetchKey} />}
</ErrorBoundary>
);
};
export default App;
FAQs
The Error Boundary component. Fully supports Relay (useQueryLoader/loadQuery, useLazyLoadQuery).
We found that @os-design/error-boundary demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.